<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2020 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div class="localLoader" [class.hidden]="!loading">
    <winery-loader></winery-loader>
</div>
<div *ngIf="!loading">
    <winery-table [columns]="columns" [data]="artifacts"
                  [disableButtons]="!instanceService?.currentVersion?.editable"
                  (addBtnClicked)="openModal()"
                  (removeBtnClicked)="openRemoveModal($event)">
    </winery-table>
</div>

<winery-modal bsModal #removeModal="bs-modal" [modalRef]="removeModal">
    <winery-modal-header title="Remove Artifact"></winery-modal-header>
    <winery-modal-body>
        <p>
            Are you sure you want to remove <span style="font-weight: bold;">{{ selectedArtifact.name }}</span>?
        </p>
    </winery-modal-body>
    <winery-modal-footer [closeButtonLabel]="'Cancel'" [okButtonLabel]="'Delete'"
                         [okButtonClass]="'btn-danger'"
                         (onOk)="removeArtifact();">
    </winery-modal-footer>
</winery-modal>

<winery-modal bsModal #modal="bs-modal" [modalRef]="modal"
              (onShown)="nameInput.focus(); fileInput.value = ''"
              (onHide)="form.reset(); typeInput.selectedValue = '(none)';">
    <winery-modal-header title="Add Artifact"></winery-modal-header>
    <winery-modal-body>
        <form #form="ngForm">
            <div class="form-group">
                <label class="control-label" for="name">Name</label>
                <input type="text" #nameInput #propName="ngModel" id="name" name="key" autocomplete=off
                       class="form-control" [(ngModel)]="selectedArtifact.name"
                       [wineryDuplicateValidator]="validatorObject"/>
                <div *ngIf="propName.errors && (propName.dirty || propName.touched)"
                     class="alert alert-danger">
                    <div [hidden]="!propName.errors.wineryDuplicateValidator">No duplicates allowed!</div>
                    <div [hidden]="!propName.errors.required">Name is required</div>
                </div>
            </div>
            <div class="form-group">
                <winery-qname-selector #typeInput width="100%" [title]="'Artifact Type'" [displayList]="artifactTypes"
                                       [toscaType]="" [showOpenButton]="false"
                                       (selectedValueChanged)="onArtifactTypeChanged($event.value)">
                </winery-qname-selector>
            </div>

            <div class="form-group">
                <div class="row">

                    <div class="col-md-9">
                        <label for="file">Select Artifact File (will be uploaded when clicking on "Add")</label>
                        <br>
                        <input type="file" #fileInput id="file" name="file" [disabled]="isFileRemote"
                               [accept]="allowedTypes" (change)="fileSelected($event.target.files)"/>
                    </div>
                    <div class="col-md-3">
                        <div class="checkbox">
                            <label>
                                <input id="fileRemote" name="fileRemote" [(ngModel)]="isFileRemote"
                                       (change)="selectedArtifact.file = null" type="checkbox"
                                       [disabled]="isRepositoryType">
                                Specify URL
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group" *ngIf="isFileRemote">
                <label class="control-label" for="fileRef">Artifact URL</label>
                <input class="form-control" id="fileRef" name="fileRef" [(ngModel)]="selectedArtifact.file" type="text">
            </div>

            <div class="form-group">
                <label class="control-label" for="description">Description</label>
                <input type="text" name="description" id="description" class="form-control"
                       [(ngModel)]="selectedArtifact.description"/>
            </div>
            <div class="form-group" *ngIf="!isRepositoryType">
                <label class="control-label" for="deployPath">Deployment Path</label>
                <input type="text" id="deployPath" name="deployPath"
                       [(ngModel)]="selectedArtifact.deployPath" class="form-control">
            </div>
        </form>
    </winery-modal-body>
    <winery-modal-footer (onOk)="addArtifact()"
                         [disableOkButton]="!form?.form.valid || selectedArtifact.name === null || selectedArtifact.type === null || selectedArtifact.file === null || selectedArtifact.file === ''"
                         [closeButtonLabel]="'Cancel'" [okButtonLabel]="'Add'">
    </winery-modal-footer>
</winery-modal>
